<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../主页/font/iconfont.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <link rel="stylesheet" href="./css/details.css">
    <style>
        .swiper-pagination-bullet {
            width: 50px;
            height: 50px;
            border-radius: 0;
            /* background: url(./img/OIP-14.jpg); */
            background-size: 100%, 100%;
            /* opacity: 1; */
            background-image: url();
        }
    </style>
</head>

<body>
    <!-- 头部 -->
    <header>
        <div class="top container clearfix">
            <!-- 左侧log -->
            <div class="leftlog">
                <span class="iconfont icon-xiongmao"></span>
                <h5>熊猫优选</h5>
                <h6>XIONG MAO YOU XUAN</h6>
            </div>
            <!-- 搜索框 -->
            <div class="sousuo">
                <span class="iconfont icon-sousuo"></span>
                <input type="text" placeholder="搜索商品，发现更多优惠">
                <div>搜索</div>
            </div>
            <!-- 右侧图标 -->
            <div class="rightnav">
                <ul>
                    <li>
                        <span class="iconfont icon-wenjianjia"></span>
                        <div>全程包邮</div>
                    </li>
                    <li>
                        <span class="iconfont icon-qian"></span>
                        <div>7天退换</div>
                    </li>
                    <li>
                        <span class="iconfont icon-duigou"></span>
                        <div>品质保证</div>
                    </li>
                </ul>

            </div>
        </div>
    </header>
    <main class="container">
        <!-- 导航 -->
        <div class="nav clearfix">
            <div class="container">
                <ul>
                    <li class="firstli">商品详情</li>
                </ul>
            </div>
        </div>
        <!-- 商品 -->
        <div class="prodate">
            <div class="bigjin" id="showbox">
                <div class="swiper">
                    <div class="swiper-wrapper show-box">
                        <!-- <div class="swiper-slide " ><img src="./img/OIP-14.jpg" alt=""></div>
                        <div class="swiper-slide "><img src="./img/OIP-C10.jpg" alt=""></div>
                        <div class="swiper-slide "><img src="./img/OIP-C13.jpg" alt=""></div>
                        <div class="swiper-slide "><img src="./img/OIP-C17.jpg" alt=""></div> -->
                    </div>

                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>

                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
                <div class="mask"></div>
                <div class="right-box">
                    <img src="./img/OIP-C18.jpg" alt="">
                </div>
                <!-- <div class="smilimg">
                    <ul>
                        <li><img src="./img/OIP-14.jpg" alt=""></li>
                        <li><img src="./img/OIP-C10.jpg" alt=""></li>
                        <li><img src="./img/OIP-C13.jpg" alt=""></li>
                        <li><img src="./img/OIP-C17.jpg" alt=""></li>
                    </ul>
                </div> -->

            </div>

            <div class="jiesao">
                <!-- <span>淘</span>
                <span>包邮</span>
                <span>江西辣典100g纯辣片香辣辣条网红休闲零食欢乐鞋底手撕老式80后</span> -->
            </div>
            <div class="jiege clearfix">
                <!-- <div>￥原价25</div>
                <div>折扣价:￥<span>6</span></div>
                <div>76人已经买</div> -->
            </div>
            <a href="">加入购物车</a>
        </div>
        <div class="shangjia">
            <h6>卖家信息</h6>
            <img src="./img/15.jpg" alt="">
            <div>鲨鱼辣椒</div>
            <ul class="sjul">
                <li>
                    <div>描述</div>
                    <div>4.8</div>
                </li>
                <li>
                    <div>服务</div>
                    <div>4.8</div>
                </li>
                <li>
                    <div>物流</div>
                    <div>4.8</div>
                </li>
            </ul>
        </div>
    </main>
    <script src="./js/swiper-bundle.min.js"></script>
    <script src="./js/jquery-3.6.0.js"></script>
    <script src="./js/util.js"></script>
    <script src="./js/glass1.js"></script>
    <script src="./js/details.js"></script>
</body>

</html>